﻿@page "/MultiSelect-Dropdown/Grouping-With-CheckBox"

@using Syncfusion.Blazor.DropDowns

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the grouping functionalities of the MultiSelect in checkbox mode. Clicking the checkbox in group will select all the items grouped under it. Click the MultiSelect element and then type the character in the search box. It will display the filtered list
        items based on the typed characters and then select the multiple values through the checkbox.</p>
</SampleDescription>
<ActionDescription>
   <p>The MultiSelect has built-in support to select the multiple values through the checkbox, when the <a href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MultiSelectModel-1.html#Syncfusion_Blazor_DropDowns_MultiSelectModel_1_Mode' target='_blank'> Mode</a> property is set to
      <code>CheckBox</code>. To perform the checkbox feature in MultiSelect, the <code>CheckBoxSelection</code> module should be injected in the application end.</p>
   <p>The grouping sample illustrates how the vegetables are grouped based on its category.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <SfMultiSelect TValue="string[]" AllowFiltering="true" TItem="Vegetables" Mode="@VisualMode.CheckBox" Placeholder="Select a vegetable" DataSource="@VegetablesList" ShowSelectAll="@ShowSelectAllCheckBox"
                        EnableSelectionOrder="@EnableSelectionOrders" FilterBarPlaceholder="Search Vegetables" EnableGroupCheckBox="@EnableCheckBox" PopupHeight="350px">
            <MultiSelectFieldSettings GroupBy="Category" Value="Vegetable"></MultiSelectFieldSettings>
        </SfMultiSelect>
    </div>
</div>

@code{

    public bool ShowSelectAllCheckBox { get; set; } = true;
    public bool EnableSelectionOrders { get; set; } = false;
    public bool EnableCheckBox { get; set; } = true;

    public class Vegetables
    {
        public string Vegetable { get; set; }
        public string Category { get; set; }
        public string ID { get; set; }
    }

    List<Vegetables> VegetablesList = new List<Vegetables>()
{
        new Vegetables() { Vegetable = "Cabbage", Category = "Leafy and Salad", ID = "item1" },
        new Vegetables() { Vegetable = "Chickpea", Category = "Beans", ID = "item2" },
        new Vegetables() { Vegetable = "Garlic", Category = "Bulb and Stem", ID = "item3" },
        new Vegetables() { Vegetable = "Green bean", Category = "Beans", ID = "item4" },
        new Vegetables() { Vegetable = "Horse gram", Category = "Beans", ID = "item5" },
        new Vegetables() { Vegetable = "Nopal", Category = "Bulb and Stem", ID = "item6" },
        new Vegetables() { Vegetable = "Onion", Category = "Bulb and Stem", ID = "item7" },
        new Vegetables() { Vegetable = "Pumpkins", Category = "Leafy and Salad", ID = "item8" },
        new Vegetables() { Vegetable = "Spinach", Category = "Leafy and Salad", ID = "item9" },
        new Vegetables() { Vegetable = "Wheat grass", Category = "Leafy and Salad", ID = "item10" },
        new Vegetables() { Vegetable = "Yarrow", Category = "Leafy and Salad", ID = "item11" },
    };
}

<style>
    .control_wrapper {
        width: 350px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>